<template>
	<!-- 编辑资料 -->
	<view class="editData">
		<view class="edit-list">
			<view class="edit-item" style=" display: flex;align-items: center;justify-content: space-between;">
				<text class="item-title" style="margin-left: 30rpx;">头像</text>
				<view class="con-box" @click="chooseImg">
					<view class="item-info">
						<image class="head-img" :src="headImg"></image>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" @click="toUrl">
				<view class="con-box">
					<text class="item-title">轮播图设置</text>
					<view class="item-info">
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" @click="showItem('昵称',userInfo.usrName,1)">
				<view class="con-box">
					<text class="item-title">昵称</text>
					<view class="item-info">
						<text class="item-con">{{userInfo.usrName}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<picker mode="selector" :range="sexArr" @change="bindSexChange">
				<view class="edit-item">
					<view class="con-box">
						<text class="item-title">性别</text>
						<view class="item-info">
							<text class="item-con">{{userInfo.sex || '点击输入'}}</text>
							<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
						</view>
					</view>
				</view>
			</picker>
			<view class="edit-item" @click="showItem('年龄',userInfo.age,3)">
				<view class="con-box">
					<text class="item-title">年龄</text>
					<view class="item-info">
						<text class="item-con">{{userInfo.age || '点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<uni-data-picker seltype="city" @changeCityData="changeCityData" :showAll="true"
				:currDataCity="currDataCity" placeholder="请选择地区" popup-title="选择地区" @change="onchangePlace">
				<view class="edit-item">
					<view class="con-box">
						<text class="item-title">所在城市</text>
						<view class="item-info">
							<text class="item-con">{{userInfo.address}}</text>
							<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
						</view>
					</view>
				</view>
			</uni-data-picker>
			<view class="edit-item" @click="showItem('详细地址',userInfo.moreAddr,9)">
				<!-- 业务范围 -->
				<view class="con-box">
					<text class="item-title">详细地址</text>
					<view class="item-info">
						<text class="item-con">{{userInfo.moreAddr || '点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<uni-data-picker seltype="hy" seltId="-1" @changeCurrData="changeCurrData" :currData="currData"
				:showAll="true" placeholder="请选择行业" popup-title="选择行业" @change="onchange">
				<view class="edit-item">
					<view class="con-box">
						<text class="item-title">所属行业</text>
						<view class="item-info">
							<text
								class="item-con">{{userInfo.mainBusiness && userInfo.mainBusiness.length>20?userInfo.mainBusiness && userInfo.mainBusiness.slice(0,20)+'...':userInfo.mainBusiness}}</text>
							<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
						</view>
					</view>
				</view>
			</uni-data-picker>
			<view class="edit-item" @click="showItem('业务范围',userInfo.businessScope,8)">
				<!-- 业务范围 -->
				<view class="con-box">
					<text class="item-title">业务范围</text>
					<view class="item-info">
						<text class="item-con">{{userInfo.businessScope || '点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" @click="showItem('个人简介',userInfo.remarks,4)">
				<!-- remarks -->
				<view class="con-box">
					<text class="item-title">个人简介</text>
					<view class="item-info">
						<text class="item-con">{{userInfo.remarks?'点击查看':'点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<picker mode="selector" :range="compList" v-if="compList && compList.length" range-key="companyNameCn"
				@change="changeComp">
				<view class="edit-item">
					<view class="con-box">
						<text class="item-title">所属公司</text>
						<view class="item-info">
							<text class="item-con">{{acComp}}</text>
							<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
						</view>
					</view>
				</view>
			</picker>
			<view class="edit-item" @click="showItem('职务',userInfo.posts,5)">
				<view class="con-box">
					<text class="item-title">职务</text>
					<view class="item-info">
						<text class="item-con">{{userInfo.posts || '点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" @click="showItem('邮箱',userInfo.email,6)">
				<view class="con-box">
					<text class="item-title">邮箱</text>
					<view class="item-info">
						<text class="item-con">{{userInfo.email || '点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" @click="showItem('联系方式',userInfo.contactNumber,7)">
				<view class="con-box">
					<text class="item-title">联系方式</text>
					<view class="item-info">
						<text class="item-con">{{userInfo.contactNumber || '点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" @click="showItem('微信号',userInfo.openid,10)">
				<!-- openid -->
				<view class="con-box">
					<text class="item-title">微信号</text>
					<view class="item-info">
						<text class="item-con">{{userInfo.openid || '点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<image-cropper :cropHeight="200" :cropWidth="200" :src="tempFilePath" @confirm="confirmImg" @cancel="cancelImg">
		</image-cropper>
		<!-- 输入框弹出框 -->
		<uni-popup ref="inputPop" type="dialog">
			<uni-popup-dialog :maxlength="maxlength" v-if="inpTitle" mode="input" @close="close" @confirm="confirm"
				:value="inpContent" :title="inpTitle">
			</uni-popup-dialog>
		</uni-popup>
		<my-auth-modal></my-auth-modal>
	</view>
</template>
<script>
	import ImageCropper from "@/pages/meSub/components/invinbg-image-cropper/invinbg-image-cropper.vue"
	import {
		editUsrCraftsman,
		queryCraftsmanById,
		editUsrCraftsmanLogo,
		queryAll
	} from "@/common/api/auth.js"
	import {
		uploadFilePromise
	} from "@/utils/upload.js"
	import {
		getToken,
		setToken,
		clearToken
	} from '@/utils/token.js'
	import {
		fileIp,
	} from "@/env.js"
	export default {
		components: {
			ImageCropper
		},
		data() {
			return {
				compList: [],
				userInfo: {},
				inpTitle: '', //弹出框提示文字
				inpContent: '', //弹出框内容
				inpIndex: 0, //弹出框下标
				sexArr: ['男', '女'], //选择性别
				//上传头像
				logoData: {
					craftsmanId: '',
					headImg: ''
				},
				hyList: [], //行业五级分类
				headImg: '', //用户头像用于展示
				tempFilePath: '', //截图路径
				placeList: [], //城市地点
				canClick: false,
				ip: fileIp,
				acComp: '',
				maxlength: '',
				//选择框
				currData: {},
				currDataCity: {}
			}
		},
		onLoad: function() {
			//获取用户信息
			this.queryCraftsmanById(getToken('useNum'))
			this.queryAll()
		},
		onReady() {
			// 初始化参数并创建上传DOM
		},
		methods: {
			//改变行业选择 数据
			changeCurrData(e) {
				this.currData = e;
			},
			// 改变城市选择数据
			changeCityData(e) {
				this.currDataCity = e;
			},
			changeComp(e) {
				let idx = e.target.value
				this.editItem({
					'companyNo': this.compList[idx].companyId
				})
				this.acComp = this.compList[idx].companyNameCn
			},
			queryAll() {
				queryAll({
					craftsmanId: getToken('useNum')
				}).then(res => {
					if (res.data && res.data.code) {
						let data = res.data && res.data.listData
						data && data.forEach(m => {
							if (this.userInfo.companyNo == m.companyNo) {
								this.acComp = m.usrCompany && m.usrCompany.companyNameCn
							} else if (m.usrCompany && m.usrCompany.companyId) {
								this.compList.push(m.usrCompany)
							}
						})
					}
				})
			},
			async confirmImg(e) {
				//截图工具点击确定之后上传图片
				//如果不为空的话上传之后裁剪又会跳出来
				this.tempFilePath = ''
				let params = {
					params: {}
				}
				params['params']['fileType'] = 100
				params['params']['fileCode'] = 130
				params['url'] = e.detail.tempFilePath
				const result = await uploadFilePromise(params)
				this.headImg = 'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/' + result
				let params2 = {
					craftsmanId: getToken('useNum'),
					headImg: result
				}
				this.editItem(params2)
			},
			// 取消裁剪图片
			cancelImg() {
				// url设置为空，隐藏控件
				this.tempFilePath = "";
			},
			toUrl() {
				uni.navigateTo({
					url: '/pages/meSub/editData/swiperMana'
				})
			},
			chooseImg() {
				uni.chooseImage({
					count: 1,
					success: (e) => {
						this.tempFilePath = e.tempFilePaths[0]
					}
				})
			},
			//改变行业选择
			onchange(e) {
				let arr = e.detail.value
				let text = ''
				arr.forEach(item => {
					text = text + " " + item.text
				})
				text = text.trim()
				this.editItem({
					'mainBusiness': text
				})
			},
			//改变城市选择
			onchangePlace(e) {
				let arr = []
				let data = e.detail.value
				let param = {}
				data.forEach(item => {
					arr.push(item.text)
				})
				param.address = arr.join(' ')
				this.editItem(param)
			},
			bindSexChange(e) {
				let param = {}
				param.sex = this.sexArr[e.target.value]
				this.editItem(param)
			},
			//打开弹窗
			showItem(title, content, index) {
				if (index == 1) {
					this.maxlength = 30
				} else {
					this.maxlength = ''
				}
				this.inpTitle = title
				this.inpContent = content
				this.inpIndex = index
				this.$refs['inputPop'].open()
			},
			//编辑单个
			editItem(param) {
				uni.showLoading({
					title: '修改中'
				})
				param.craftsmanId = getToken('useNum')
				editUsrCraftsman(param).then(res => {
					uni.hideLoading()
					if (res.data.craftsmanId) {
						this.userInfo = res.data
						setToken('userInfo', res.data)
						this.$store.commit('isFresh', true)
					} else {
						this.$u.toast('修改出错')
					}
				})
			},
			//弹窗点取消
			close() {
				this.$refs['inputPop'].close()
				this.inpContent = '1'
			},
			//弹窗点确定
			confirm(value) {
				if (!value) {
					this.msg('请输入内容', 'none')
					return;
				}
				value = value.trim()
				let param = {}
				let index = this.inpIndex
				switch (index) {
					case 1: //修改昵称
						if (value.length < 15) {
							this.editItem({
								'usrName': value
							})
							this.close()
						} else {
							this.msg('最多十五个字符', 'none')
						}
						break;
					case 3: //修改年龄
						if (new RegExp(/^([1-9][0-9]{0,1}|100)$/).test(parseInt(value))) {
							param = {
								'age': value
							}
							this.editItem(param)
							this.close()
						} else {
							this.msg('请输入1-99以内的数字', 'none')
						}
						break;
					case 4: //修改个人简介
						this.editItem({
							'remarks': value
						})
						this.close()
						break;
					case 5: //修改职务
						if (value.length < 15) {
							param = {
								'posts': value
							}
							this.editItem(param)
							this.close()
						} else {
							this.msg('职务不要超过15个字符', 'none')
						}
						break;
					case 6: //修改邮箱
						if (this.$u.test.email(value) == true) {
							this.editItem({
								'email': value
							})
							this.close()
						} else {
							this.msg('邮箱格式有误', 'none')
						}
						break;
					case 7: //修改联系方式
						if (this.$u.test.mobile(value) == true) {
							this.editItem({
								'contactNumber': value
							})
							this.close()
						} else {
							this.msg('手机号有误', 'none')
						}
						break;
					case 8:
						this.editItem({
							'businessScope': value
						})
						break;
					case 9:
						this.editItem({
							'moreAddr': value
						})
						break;
					case 10:
						this.editItem({
							'openid': value
						})
						break;
					default:
						break;
				}
			},
			//获取用户信息
			queryCraftsmanById(userId) {
				queryCraftsmanById({
					craftsmanId: userId
				}).then(res => {
					if (res.data && res.data.craftsmanId) {
						this.userInfo = res.data
						this.headImg = this.ip + '/file/ydylapp/usrCraftsman/image/' + this.userInfo.headImg
					}
				})
			},
			toBack() {
				uni.navigateBack()
			}
		}
	}
</script>
<style scoped>
	.edit-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
	}

	.edit-item {
		border-bottom: 1rpx solid #f0f0f0;
		width: 686rpx;
		border-radius: 32rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 54, 138, 0.1);
		margin-bottom: 20rpx;
	}

	.con-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 22rpx 0 32rpx;
	}

	.item-title {
		line-height: 100rpx;
	}

	.head-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}

	.item-info {
		display: flex;
		align-items: center;
	}

	.item-con {
		font-size: 28rpx;
		color: #2c3e50;
		max-width: 500rpx;
		line-height: 40rpx;
	}

	.item-title {
		font-size: 30rpx;
		color: #2c3e50;
	}

	.editData {
		background-color: #ffffff;
	}
</style>